<template>
    <div class="bac">
        <!-- 版心 -->
        <div class="container">
            <van-cell-group>
                <van-form @submit="onSubmit">
                    <h1 class="zhuce-font">登录</h1>
                    <van-field v-model="email" name="邮箱" left-icon="./img/icon/email.png" placeholder="请填写邮箱"
                        :rules="[{ required: true, message: '请填写邮箱' }]" />
                    <van-field v-model="password" type="password" name="密码" left-icon="./img/icon/pwd.png"
                        placeholder="请填写密码" :rules="[{ required: true, message: '请填写密码' }]" />
                    <div>
                        <van-button round block type="primary" native-type="submit"
                            style="margin-bottom: 1rem;">登录</van-button>
                        <van-button round block type="info" @click="jump">注册</van-button>
                    </div>
                </van-form>
            </van-cell-group>
            <!-- 其他登陆方式 -->
            <div class="zdy-botton">
                <!-- 分割线 -->
                <van-divider style="margin:1rem 0">其他登陆方式</van-divider>
                <van-grid :border="false" :column-num="3" icon-size="3rem" direction="horizontal">
                    <van-grid-item icon="./img/icon/qq.png" text="QQ" />
                    <van-grid-item icon="./img/icon/weibo.png" text="微博" />
                    <van-grid-item icon="./img/icon/chat.png" text="微信" />
                </van-grid>
            </div>
        </div>
        <!-- 登录表单 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            email: '',
            password: '',
        };
    },
    methods: {
        jump() {
            this.$router.replace("/register")
        },
        onSubmit(values) {
            console.log('submit', values);
            console.log(this.$api.login);
            this.$axios.post(this.$api.login, { u_email: this.email, u_pwd: this.password }).then(res => {
                console.log(res);
                return res.data
            }).then(res => {
                if (res.code == 200) {
                    this.$toast.success(res.msg)
                    sessionStorage.setItem("user", JSON.stringify(res?.data))
                    sessionStorage.setItem("token", res?.data?.token)
                    this.$router.replace("/home")
                } else {
                    this.$toast.fail(res.msg)
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.bac {
    display: flex;
    height: 100vh;
    background: url("/public/img/background/reg_bg.jpg");
    background-color: #f7f7f7;
    background-size: 100vw 25rem;
    background-repeat: no-repeat;
}

.van-cell-group {
    border-radius: 1rem;
    border: none;
    padding: 4rem;
    margin-top: 6rem;
    clear: both;
}

.zdy-bottom {
    background-color: #f7f7f7;
}

.van-button--primary {
    background-color: #fecb1c;
    border: none;
}

.van-button--info {
    background-color: #e0d7d7;
    border: none;
}

.van-field__control,
.van-field__error-message {
    padding-left: 3rem;
    padding-right: 1rem;
}

.van-cell {
    display: flex;
    align-items: center;
}

.container {
    width: 34rem;
    margin: 1rem auto;
    margin-top: 10rem;
}

.zhuce-font {
    font-size: 1.6rem;
    color: #fecb1c;
    text-align: center;
    margin-bottom: 1rem;
    padding-top: 1rem;
}

.van-form {
    background-color: #f7f7f7;
    padding: 2rem;
}

.van-grid-item__content {
    @grid-item-content-background-color: #f7f7f7
}
</style>
